<template>
	<view class="content-borderbox">
		<!-- 单行显示（默认） -->
		<view class="name-line-box" v-if="!expanded" @click="toggleExpand">
			<text v-if="item.fellows.length==0">暂无</text>
			<view class="name-line">
				<text
					v-for="(user, i) in item.fellows" 
					:key="user.id"
					class="name"
					@click.stop="goToUserPage(user.userId)"
				>
					{{ user.userName }}{{ i < item.fellows.length - 1 ? '、' : '' }}
				</text>
			</view>
			<view class="expand-btn"  @click.stop="toggleExpand" v-if="showExpand">
				<view class="">
					... 更多
				</view>
				<u-icon name="arrow-down" color="#999"></u-icon>
			</view>
		</view>
		<!-- 展开后多行显示 -->
		<view class="name-expanded" v-else @click="toggleExpand">
			<text 
				v-for="(user, i) in item.fellows" 
				:key="user.id"
				class="name"
				@click.stop="goToUserPage(user.userId)"
			>
				{{ user.userName }}{{ i < item.fellows.length - 1 ? '、' : '' }}
			</text>
			<text class="collapse-btn"> 收起</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"person-shrink",
		props:{
			line:{ //行数
				type:Number,
				default:3
			},
			item:{ // 同行人信息
				type:Object,
				default: () => ({})
			},
			size:{ //字体大小，单位rpx
				type:Number,
				default:32
			},
			btnSize:{
				type:Number,
				default:32
			},
			ellipsisBack:{ //省略号背景色
				type:String,
				default:'#fff'
			},
			hideEllips:{ //是否隐藏省略号
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				borderHeight:0, //外层盒子的高度
				contentHeight:0, //放文字的盒子高度
				expanded: false, // 是否展开
				showExpand: false, // 是否需要显示“展开”按钮
			};
		},
		mounted(){
			this.initBtnShowStauts();
		},
		methods:{
			initBtnShowStauts(){
				const query = uni.createSelectorQuery().in(this);
				let p1 = new Promise((resolve)=>{
					this.$nextTick(()=>{ 
						query.select('.name-line-box').fields({ size: true, scrollOffset: true },
						data => { resolve(data.height) }).exec(); 
					}) 
				})
				let p2 = new Promise((resolve)=>{ 
					this.$nextTick(()=>{ 
						query.select('.name-line').fields({ size: true, scrollOffset: true }, 
						data => { resolve(data.height) }).exec(); 
					}) 
				}) 
				Promise.all([p1,p2]).then((res)=>{ 
					this.borderHeight = res[0]; 
					this.contentHeight = res[1];
					this.showExpand = this.borderHeight<this.contentHeight||this.item.fellows.length>=3;
				});
			},
			// 切换展开/收起
			toggleExpand() {
				console.log(this.expanded);
				this.expanded = !this.expanded;
			},
			// 跳转到用户主页
			goToUserPage(userId) {
				uni.navigateTo({
					url:"/pages/user/others/others?userId="+userId
				})
			},
		}
	}
</script>

<style>
/* 单行显示（默认） */
.name-line-box{
	width: 100%;
	display: flex;
}
.name-line {
	width: 80%;
	white-space: nowrap;
	overflow: hidden;
	/* // text-overflow: ellipsis; */
}

/* 展开后多行显示 */
.name-expanded {
	word-break: break-all;
	width:100%;
}

/*	 姓名样式（可点击） */
.name {
	color: #FF6520;
}

/* “展开”按钮样式 */
.expand-btn,
.collapse-btn {
	width: 140rpx;
	color: #999;
	display: flex;
}
</style>